<template>
	<view class="messagePage myBackground">
		<!-- <u-navbar title="个人中心"@rightClick="rightClick":autoBack="true"></u-navbar> -->
		<view class="content">
			<view class="mb15">
				<u-tabs :list="tabList" :current="current" lineColor="#3276FF" lineWidth="25" :activeStyle="{color: '#ffffff'}"
					:inactiveStyle="{color: '#ffffff'}" @change="tabsChange"></u-tabs>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @change="transition">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="h100p w100p">
						<component :is="isShowEchart" ref="myChildComponentTwo"></component>
						<view style="height: 2rpx;"></view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" v-if="threeBuildData.indexOf(activeMenu)==-1">
					<scroll-view scroll-y class="h100p w100p">
						<component :is="isShowEchart2" ref="myChildComponentTwo2"></component>
						<view style="height: 2rpx;"></view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="h100p w100p">
						<component :is="isShowIndex" ref="myChildComponentOne"></component>
						<view style="height: 2rpx;"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<!-- <tab-bar-view :tabCode="'1'"></tab-bar-view> -->
	</view>
</template>

<script>
	import ggqyThreeBuildOneFloor from "@/components/dormThreeBuildingOneFloor/operationData/index.vue"
	import roomThreeBuildOneFloor from "@/components/dormThreeBuildingOneFloor/operationData/index2.vue"
	import ggqyThreeBuildTwoFloor from "@/components/dormThreeBuildingTwoFloor/operationData/index.vue"
	import roomThreeBuildTwoFloor from "@/components/dormThreeBuildingTwoFloor/operationData/index2.vue"
	import ggqyThreeBuildThreeFloor from "@/components/dormThreeBuildingThreeFloor/operationData/index.vue"
	import roomThreeBuildThreeFloor from "@/components/dormThreeBuildingThreeFloor/operationData/index2.vue"
	import ggqyThreeBuildFourFloor from "@/components/dormThreeBuildingFourFloor/operationData/index.vue"
	import roomThreeBuildFourFloor from "@/components/dormThreeBuildingFourFloor/operationData/index2.vue"
	import ggqyThreeBuildFiveFloor from "@/components/dormThreeBuildingFiveFloor/operationData/index.vue"
	import roomThreeBuildFiveFloor from "@/components/dormThreeBuildingFiveFloor/operationData/index2.vue"

	import ggqyTwoBuildOneFloor from "@/components/dormTwoBuildingOneFloor/operationData/index.vue"
	import roomTwoBuildOneFloor1 from "@/components/dormTwoBuildingOneFloor/operationData/index2.vue"
	import roomTwoBuildOneFloor2 from "@/components/dormTwoBuildingOneFloor/operationData/index3.vue"
	import ggqyTwoBuildTwoFloor from "@/components/dormTwoBuildingTwoFloor/operationData/index.vue"
	import roomTwoBuildTwoFloor1 from "@/components/dormTwoBuildingTwoFloor/operationData/index2.vue"
	import roomTwoBuildTwoFloor2 from "@/components/dormTwoBuildingTwoFloor/operationData/index3.vue"
	import ggqyTwoBuildThreeFloor from "@/components/dormTwoBuildingThreeFloor/operationData/index.vue"
	import roomTwoBuildThreeFloor1 from "@/components/dormTwoBuildingThreeFloor/operationData/index2.vue"
	import roomTwoBuildThreeFloor2 from "@/components/dormTwoBuildingThreeFloor/operationData/index3.vue"
	import ggqyTwoBuildFourFloor from "@/components/dormTwoBuildingFourFloor/operationData/index.vue"
	import roomTwoBuildFourFloor1 from "@/components/dormTwoBuildingFourFloor/operationData/index2.vue"
	import roomTwoBuildFourFloor2 from "@/components/dormTwoBuildingFourFloor/operationData/index3.vue"
	import ggqyTwoBuildFiveFloor from "@/components/dormTwoBuildingFiveFloor/operationData/index.vue"
	import roomTwoBuildFiveFloor1 from "@/components/dormTwoBuildingFiveFloor/operationData/index2.vue"
	import roomTwoBuildFiveFloor2 from "@/components/dormTwoBuildingFiveFloor/operationData/index3.vue"

	import ggqyOneBuildOneFloor from "@/components/dormOneBuildingOneFloor/operationData/index.vue"
	import roomOneBuildOneFloor1 from "@/components/dormOneBuildingOneFloor/operationData/index2.vue"
	import roomOneBuildOneFloor2 from "@/components/dormOneBuildingOneFloor/operationData/index3.vue"
	import ggqyOneBuildTwoFloor from "@/components/dormOneBuildingTwoFloor/operationData/index.vue"
	import roomOneBuildTwoFloor1 from "@/components/dormOneBuildingTwoFloor/operationData/index2.vue"
	import roomOneBuildTwoFloor2 from "@/components/dormOneBuildingTwoFloor/operationData/index3.vue"
	import ggqyOneBuildThreeFloor from "@/components/dormOneBuildingThreeFloor/operationData/index.vue"
	import roomOneBuildThreeFloor1 from "@/components/dormOneBuildingThreeFloor/operationData/index2.vue"
	import roomOneBuildThreeFloor2 from "@/components/dormOneBuildingThreeFloor/operationData/index3.vue"
	import ggqyOneBuildFourFloor from "@/components/dormOneBuildingFourFloor/operationData/index.vue"
	import roomOneBuildFourFloor1 from "@/components/dormOneBuildingFourFloor/operationData/index2.vue"
	import roomOneBuildFourFloor2 from "@/components/dormOneBuildingFourFloor/operationData/index3.vue"
	import ggqyOneBuildFiveFloor from "@/components/dormOneBuildingFiveFloor/operationData/index.vue"
	import roomOneBuildFiveFloor1 from "@/components/dormOneBuildingFiveFloor/operationData/index2.vue"
	import roomOneBuildFiveFloor2 from "@/components/dormOneBuildingFiveFloor/operationData/index3.vue"

	import ggqyelectricianOneBuild from "@/components/electricianOneBuild/operationData/index.vue"
	import roomelectricianOneBuild from "@/components/electricianOneBuild/operationData/index2.vue"
	import ggqyelectricianTwoBuild from "@/components/electricianTwoBuild/operationData/index.vue"
	import roomelectricianTwoBuild from "@/components/electricianTwoBuild/operationData/index2.vue"
	import ggqyelectricianThreeBuild from "@/components/electricianThreeBuild/operationData/index.vue"
	import roomelectricianThreeBuild from "@/components/electricianThreeBuild/operationData/index2.vue"
	export default {
		components: {
			ggqyThreeBuildOneFloor,
			roomThreeBuildOneFloor,
			ggqyThreeBuildTwoFloor,
			roomThreeBuildTwoFloor,
			ggqyThreeBuildThreeFloor,
			roomThreeBuildThreeFloor,
			ggqyThreeBuildFourFloor,
			roomThreeBuildFourFloor,
			ggqyThreeBuildFiveFloor,
			roomThreeBuildFiveFloor,
			ggqyTwoBuildOneFloor,
			roomTwoBuildOneFloor1,
			roomTwoBuildOneFloor2,

			ggqyTwoBuildTwoFloor,
			roomTwoBuildTwoFloor1,
			roomTwoBuildTwoFloor2,
			ggqyTwoBuildThreeFloor,
			roomTwoBuildThreeFloor1,
			roomTwoBuildThreeFloor2,
			ggqyTwoBuildFourFloor,
			roomTwoBuildFourFloor1,
			roomTwoBuildFourFloor2,
			ggqyTwoBuildFiveFloor,
			roomTwoBuildFiveFloor1,
			roomTwoBuildFiveFloor2,

			ggqyOneBuildOneFloor,
			roomOneBuildOneFloor1,
			roomOneBuildOneFloor2,
			ggqyOneBuildTwoFloor,
			roomOneBuildTwoFloor1,
			roomOneBuildTwoFloor2,
			ggqyOneBuildThreeFloor,
			roomOneBuildThreeFloor1,
			roomOneBuildThreeFloor2,
			ggqyOneBuildFourFloor,
			roomOneBuildFourFloor1,
			roomOneBuildFourFloor2,
			ggqyOneBuildFiveFloor,
			roomOneBuildFiveFloor1,
			roomOneBuildFiveFloor2,

			ggqyelectricianOneBuild,
			roomelectricianOneBuild,
			ggqyelectricianTwoBuild,
			roomelectricianTwoBuild,
			ggqyelectricianThreeBuild,
			roomelectricianThreeBuild
		},
		data() {
			return {
				activeMenu: "",
				isShowIndex: "",
				isShowEchart: "",
				isShowEchart2: "",
				swiperCurrent: 0,
				current: 0,
				tabList: [],

				threeBuildData: ['3-1', '3-2', '3-3', '3-4', '3-5', 'dg-1', 'dg-2', 'dg-3']
			};
		},
		onLoad(query) {
			this.activeMenu = query.activeMenu
		},
		onShow() {
			this.switchShowPage(this.activeMenu)

			if (this.activeMenu.indexOf('dg') != -1) {
				let count = this.activeMenu.substring(this.activeMenu.length - 1)
				this.tabList = [{
					name: '楼层总开'
				}, {
					name: count + '号楼总开'
				}]
			} else {
				if (this.threeBuildData.indexOf(this.activeMenu) == -1) {
					this.tabList = [{
						name: '宿舍间'
					}, {
						name: '宿舍照明'
					}, {
						name: '公共区域',
					}]
				} else {
					this.tabList = [{
						name: '宿舍间'
					}, {
						name: '公共区域',
					}]
				}
			}
		},
		onReady() {
			// 隐藏导航栏
			uni.hideTabBar({});
		},
		onUnload() {
			if (this.threeBuildData.indexOf(this.activeMenu) == -1) {
				this.$refs.myChildComponentTwo2.clearTimer();
			}
			this.$refs.myChildComponentOne.clearTimer();
			this.$refs.myChildComponentTwo.clearTimer();
		},
		methods: {
			switchShowPage(data) {
				const _this = this
				switch (data) {
					case '3-1':
						_this.isShowIndex = 'ggqyThreeBuildOneFloor'
						_this.isShowEchart = 'roomThreeBuildOneFloor'
						break;
					case '3-2':
						_this.isShowIndex = 'ggqyThreeBuildTwoFloor'
						_this.isShowEchart = 'roomThreeBuildTwoFloor'
						break;
					case '3-3':
						_this.isShowIndex = 'ggqyThreeBuildThreeFloor'
						_this.isShowEchart = 'roomThreeBuildThreeFloor'
						break;
					case '3-4':
						_this.isShowIndex = 'ggqyThreeBuildFourFloor'
						_this.isShowEchart = 'roomThreeBuildFourFloor'
						break;
					case '3-5':
						_this.isShowIndex = 'ggqyThreeBuildFiveFloor'
						_this.isShowEchart = 'roomThreeBuildFiveFloor'
						break;
					case '2-1':
						_this.isShowIndex = 'ggqyTwoBuildOneFloor'
						_this.isShowEchart = 'roomTwoBuildOneFloor1'
						_this.isShowEchart2 = 'roomTwoBuildOneFloor2'
						break;
					case '2-2':
						_this.isShowIndex = 'ggqyTwoBuildTwoFloor'
						_this.isShowEchart = 'roomTwoBuildTwoFloor1'
						_this.isShowEchart2 = 'roomTwoBuildTwoFloor2'
						break;
					case '2-3':
						_this.isShowIndex = 'ggqyTwoBuildThreeFloor'
						_this.isShowEchart = 'roomTwoBuildThreeFloor1'
						_this.isShowEchart2 = 'roomTwoBuildThreeFloor2'
						break;
					case '2-4':
						_this.isShowIndex = 'ggqyTwoBuildFourFloor'
						_this.isShowEchart = 'roomTwoBuildFourFloor1'
						_this.isShowEchart2 = 'roomTwoBuildFourFloor2'
						break;
					case '2-5':
						_this.isShowIndex = 'ggqyTwoBuildFiveFloor'
						_this.isShowEchart = 'roomTwoBuildFiveFloor1'
						_this.isShowEchart2 = 'roomTwoBuildFiveFloor2'
						break;
					case '1-1':
						_this.isShowIndex = 'ggqyOneBuildOneFloor'
						_this.isShowEchart = 'roomOneBuildOneFloor1'
						_this.isShowEchart2 = 'roomOneBuildOneFloor2'
						break;
					case '1-2':
						_this.isShowIndex = 'ggqyOneBuildTwoFloor'
						_this.isShowEchart = 'roomOneBuildTwoFloor1'
						_this.isShowEchart2 = 'roomOneBuildTwoFloor2'
						break;
					case '1-3':
						_this.isShowIndex = 'ggqyOneBuildThreeFloor'
						_this.isShowEchart = 'roomOneBuildThreeFloor1'
						_this.isShowEchart2 = 'roomOneBuildThreeFloor2'
						break;
					case '1-4':
						_this.isShowIndex = 'ggqyOneBuildFourFloor'
						_this.isShowEchart = 'roomOneBuildFourFloor1'
						_this.isShowEchart2 = 'roomOneBuildFourFloor2'
						break;
					case '1-5':
						_this.isShowIndex = 'ggqyOneBuildFiveFloor'
						_this.isShowEchart = 'roomOneBuildFiveFloor1'
						_this.isShowEchart2 = 'roomOneBuildFiveFloor2'
						break;
					case 'dg-1':
						_this.isShowIndex = 'ggqyelectricianOneBuild'
						_this.isShowEchart = 'roomelectricianOneBuild'
						break;
					case 'dg-2':
						_this.isShowIndex = 'ggqyelectricianTwoBuild'
						_this.isShowEchart = 'roomelectricianTwoBuild'
						break;
					case 'dg-3':
						_this.isShowIndex = 'ggqyelectricianThreeBuild'
						_this.isShowEchart = 'roomelectricianThreeBuild'
						break;
					default:
						// 如果 expression 不匹配任何 case 值，则执行 default 子句中的代码块  
						break;
				}
			},

			// tabs通知swiper切换
			tabsChange(e) {
				this.current = e.index;
				this.swiperCurrent = e.index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				this.current = e.detail.current
				this.swiperCurrent = e.detail.current
			},

			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.messagePage {
		height: calc(100vh - var(--window-top));
		width: 100%;

		.content {
			display: flex;
			flex-direction: column;
			height: calc(100% - 20rpx);
			font-family: Source Han Sans CN, Source Han Sans CN-400;

			::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
				display: flex;
				flex-direction: row;
				position: relative;
				justify-content: space-between;
			}

			//选中蓝色滑块对应
			::v-deep .u-tabs__wrapper__nav__item {
				flex: 1 1 0% !important;
			}

			.swiper-box {
				flex: 1;
			}

			.swiper-item {
				height: 100%;
			}
		}
	}
</style>